<!--vue模板-->
<template>
  <div>
    <!--基础信息-->
    <div class="tip">基础信息</div>
    <el-form ref="addForm" :model="freightOrders" label-width="auto" style="
        max-width:1000px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ccc">
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="PI号 :">
            <el-input v-model="freightOrders.PINumber" placeholder="请输入(销售的po号)" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="提单号 :">
            <el-input v-model="freightOrders.bl" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="开船时间 :">
            <el-select v-model="freightOrders.sailingTime" placeholder="请选择 ">
              <el-option v-for="item in shippingOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="到港日期 :">
            <el-date-picker v-model="freightOrders.dateArrival" placeholder="请选择" style="width: 500px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="船公司 :">
            <el-input v-model="freightOrders.sCompany" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="航次:">
            <el-input v-model="freightOrders.route" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="目的港 :">
            <el-input v-model="freightOrders.destination" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="代理联系方式 :">
            <el-input v-model="freightOrders.contact" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="公司名称:">
            <el-input v-model="freightOrders.company" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="电话 :">
            <el-input v-model="freightOrders.phone" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="邮箱 :">
            <el-input v-model="freightOrders.email" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="地址:">
            <el-input v-model="freightOrders.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="实际重量:">
            <el-input v-model="freightOrders.weight" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="实际方数 :">
            <el-input v-model="freightOrders.day" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="单价:">
            <el-input v-model="freightOrders.price" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="进仓费 :">
            <el-input v-model="freightOrders.jincangfei" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<!--vue组件选项定义-->
<script setup>
import { ref ,onBeforeMount} from "vue";
import {useRouter} from "vue-router";

const tableData = ref([{date:1}]);
//路由实例
const router = useRouter();

//开船时间
const shippingOptions = [];
//表单引用 声明同名引用
const addForm=ref();

//表单对象
const freightOrders = ref({
  PINumber: "",
  bl: "",
  sailingTime: "",
  dateArrival: "",
  sCompany: "",
  route: "",
  destination: "",
  contact: "",
  company: "",
  phone: "",
  email: "",
  address: "",
  weight: "",
  day: "",
  price: "",
  jincangfei: ""
});


//生命周期
onBeforeMount(() => {
  
})

</script>

<!--vue样式 scoped 当前样式只适用于当前组件-->
<style scoped>
.tip{
  width: 1000px;
  margin: auto;
  height: 60px;
  line-height: 60px;
  border: #ccc solid 1px;
  padding-left: 40px;
}
</style>
